<template>
  <div>
    <div>
      <el-row>
        <el-col :span="24">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/list',query:{'subMenuId':item.id} }" v-for="item in curMenuList" :key="item.id">{{ item.name }}</el-breadcrumb-item>
                <el-breadcrumb-item >信息内容</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div>
              <div style="text-align: center;">
                <h2 style="color:#BF1108">{{ contentInfo.title }}</h2>
                <div>
                  <span>作者：{{ contentInfo.author }}</span>
                  <span style="margin: 0 5px">发布日期：{{ contentInfo.releaseTime.split(" ")[0] }}</span>
                  <span>信息来源：{{ contentInfo.infoForm }}</span>
                  <span style="margin: 0 5px">浏览次数：{{ contentInfo.canNum }}次</span>
<!--                  <span>[关闭]</span>-->
                </div>
              </div>
              <el-divider></el-divider>
              <div v-html="contentInfo.content"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      carouselWidth: 0,
      contentInfo: '',
      id: '',
      menuId: '',
      curMenuList:[]
    }
  },
  activated() {
    this.id = this.$route.query.contentId
    this.getContentInfo()

  },
  methods: {
    updateContent(){
      this.$http({
        url: this.$http.adornUrl(`/mh/content/update/can/num`),
        method:  'put',
        data: this.$http.adornData({
          'id': this.id,
        })
      }).then(({data}) => {
        if (data && data.code === 0) {

        }
      })
    },
    getContentInfo() {
      this.$http({
        url: this.$http.adornUrl('/mh/content/info/' + this.id),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data.success) {
          this.contentInfo = data.data
          //更新浏览次数
          this.updateContent()

          this.menuId = this.contentInfo.categoryId;
          this.getMenuList()
        }
      })
    },

    getMenuList() {
      this.$http({
        url: this.$http.adornUrl('/mh/menu/list'),
        method: 'get',
        params: this.$http.adornParams({'status': this.sysConstant.DATA_NORMAL_STATUS})
      }).then(({data}) => {
        if (data.success) {
          let menuList = data.data
          let curMenuList = []
          // menuList.forEach(item => {
          //   if (item.id === this.menuId) {
          //     curMenuList.push(item)
          //     let parentId = item.parentId
          //
          //   }
          // })
          this.a(menuList,this.menuId,curMenuList)
          console.log(curMenuList)
          this.curMenuList = curMenuList
        }
      })
    },

    a(menuList,menuId,curMenuList){
      menuList.forEach(item => {
        if (item.id === menuId) {
          curMenuList.unshift(item)
          this.a(menuList,item.parentId,curMenuList)
        }
      })
    }

  }
}
</script>

<style>

.tbg {
  background-image: url(~@/assets/img/titleimg.png); /* 替换为你的图片路径 */
  background-repeat: no-repeat;
  background-size: 150px 42px;
  height: 42px;
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

</style>

